<template>
  <view>
    <view class="Title">
      个人空间装饰
    </view>
    <view class="miniTit">Personal space decoration</view>
    <view class="nar">
      <view class="cangpi" v-for="(item,index) in gerenList" :key='index'>
            <image :src="item.photo" class="cang_img"></image>
            <!-- <view class="cang_name">{{item.name}}</view> -->
      </view>
    </view>
    <view class="Title">
      浏览空间基站
    </view>
    <view  class="miniTit">Browse the space base station</view>
    <view class="nar">
      <view class="cangpi" v-for="(item,index) in kongList" :key='index'>
            <image :src="item.photo" class="cang_img"></image>
            <!-- <view class="cang_name">{{item.name}}</view> -->
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 个人空间装饰
        gerenList:[],
        // 浏览空间基站
        kongList:[]
      };
    },
    methods: {
      async getSwiper() {
        const {data:res } = await uni.$http.get('/person-exhibition/exhibition')
        console.log(res);
        if(res.code !== 200) {
          console.log("错误");
        }
        res.data.forEach( (item, index)=> {
            if (index % 2) {
                this.gerenList.push(item)
            } else {
                this.kongList.push(item)
            }
        })
          // console.log(this.gerenList);
          // console.log(this.kongList);
        // this.ZhuanList = res.data
      },
    },
    onLoad() {
      this.getSwiper()
    }
  }
</script>

<style lang="scss">
  .Title {
      color: white;
      // text-align: center;
      font-size: 50rpx;
      letter-spacing: 5rpx;
      font-weight: 600;
      margin-left: 20rpx;
      margin-top: 20rpx;
  }
  .miniTit {
    color: white;
    // text-align: center;
    font-size: 20rpx;
    letter-spacing: 2rpx;
    font-weight: 400;
    margin-left: 20rpx;
    margin-top: 5rpx;
  }
  .nar {
    width: 94%;
    margin: 30rpx auto;
    // margin-top: 20rpx;
    border-radius: 20rpx;
    height: 260rpx;
      background-color: #273343;
      .cangpi {
         display: inline-block;
         width: 45%;
         height: 220rpx;
         margin: 20rpx 0;
         margin-left: 25rpx;
         border-radius: 10px;
         overflow: hidden;
         position: relative;
         .cang_img {
           width: 100%;
           height: 100%;
         }
         .cang_name {
           position: absolute;
           top:40%;
           left: 40%;
         }
      }
  }

</style>
